<template>
  <view>
    <u-popup :show="showfalg" mode="center">
      <view style="font-size: 24rpx; padding-bottom: 20rpx">
        <view class="u-flex u-flex-between title">
          <view class=""> 安全验证 </view>
          <u-icon name="close" @click="closetap"></u-icon>
        </view>
        <view
          class=""
          style="margin: 20rpx; position: relative; overflow: hidden"
        >
          <u--image
            :showLoading="true"
            :src="originalImageBase64"
            width="660rpx"
            height="310rpx"
          ></u--image>
          <view class="jigsawImage" :style="[imgstyle]">
            <u--image
              :showLoading="true"
              :src="jigsawImageBase64"
              width="50px"
              height="155px"
            ></u--image>
          </view>
        </view>
        <view class="">
          <!-- {{value}} -->
          <u-slider-yzm v-model="value" @change="change"></u-slider-yzm>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import qs from "qs"
import { service } from "@/config/request.js";
export default {
	data() {
		return {
			showfalg: false,
			jigsawImageBase64: "",
			originalImageBase64: "",
			value: "0",
			secretKey: "",
			token: ""
		}
	},
	computed: {
		imgstyle() {
			return {
				left: `${this.value}%`
			}
		}
	},
	methods: {
		async show() {
			this.value = "0"
			this.showfalg = true
			let data = await service({
				path: "/code/create",
				method: "get",
			});
			this.jigsawImageBase64 = 'data:image/png;base64,' + data.repData.jigsawImageBase64
			this.originalImageBase64 = 'data:image/png;base64,' + data.repData.originalImageBase64
			this.secretKey = data.repData.secretKey
			this.token = data.repData.token
		},
		closetap() {
			this.showfalg = false
		},
		async change() {
			var moveLeftDistance = (this.value * 305 / 100);
			console.log(JSON.stringify({
				x: moveLeftDistance,
				y: 5.0,
			}), this.secretKey);
			let reqdata = {
				captchaType: "blockPuzzle",
				pointJson: this.$z.ase(JSON.stringify({
					x: moveLeftDistance,
					y: 5.0,
				}), this.secretKey),
				token: this.token
			}
			let data = await service({
				path: `/code/check?${qs.stringify(reqdata)}`,
				method: 'POST'
			})
			if (data.repCode == "0000") {
				var captchaVerification = this.$z.ase(
					this.token +
					'---' + JSON.stringify({
						x: moveLeftDistance,
						y: 5.0,
					}), this.secretKey)
				this.$emit("success", {
					captchaVerification: captchaVerification
				})
				this.showfalg = false
				console.log(captchaVerification);
			} else {
				uni.$u.toast("验证失败")
				this.show();
			}
			console.log(moveLeftDistance, data.repMsg);
		}
	}
}
</script>

<style lang="scss" scoped>
.title {
  height: 80rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
}

.jigsawImage {
  position: absolute;
  top: 0;
  left: 0;
}
</style>
